<template>
   <div class='merchant alltable'>
        <div class="tabbar">
            <div class='let'>
                 <Select v-model="model1" placeholder="在职状态" class="service" style="width:200px">
                    <Option v-for="item in onthejoblist" :value="item.value" :key="item.value">{{ item.label }}</Option>
                </Select>
                <!-- <Input prefix="ios-search"  v-model="value" placeholder="请输入关键字" style="width: 300px" /> -->
                <Button class="btn_default" @click="search"><Icon type="ios-search" size="17" class="icon_wy"/>查询</Button>
            </div>
            <div class='rit'>               
                <Button @click="add_merchant"><Icon type="ios-add-circle-outline" size="17" class="icon_wy"/>添加员工</Button>
            </div>
        </div>
       <div class='tabble'>
            <div><Table :columns="columns" :loading="tab_loading" height="560" :data="data.datas" class="sel_table"></Table></div>
        </div>

        <div class='tab_pages'>
            <Page :total="data.allCount" :page-size="data_axios.pageSize" :current.sync="data_axios.pageIndex"  show-total  @on-change="merchant_data"></Page>
        </div>
    </div>  
</template>
<script>
export default {
  name: "employees",
  data() {
    return {  
      model1:"",   
      data: {
        allCount: 0,
        currPage: 1,
        datas: [],
        pageCount: 0,
        pageSize: 0
      }, 
      data_axios: {
        pageSize: 10,
        pageIndex: 1,
        merchantid: "",
        realname: "",
        mobilephone: "",
        perstatus: "",
        userid: ""
      },     
      tab_loading: false,
      onthejoblist: [
        { label: "在职", value: 1 },
        { label: "已离职", value: 2 },        
      ],      
      columns: [
        {
          title: "#",
          key: "name",
          type: "index",
          width: 50
        },
        {
          title: "姓名",
          key: "realname"
        },
        {
          title: "性别",
          key: "gendername"
        },
        {
          title: "手机号",
          key: "mobilephone"
        },
        {
          title: "是否维修工",
          key: "isrepairedworker"
        },
        {
          title: "所在部门",
          key: "depart"
        },
        {
          title: "所在角色",
          key: "duty"
        },
        {
          title: "在职状态",
          key: "perstatusname"
        },
        {
          title: "操作",
          key: "",
          width: 200,
          render: (h, params) => {
            let self = this;
            return (
              <div class="lastcoll">
                <i
                  on-click={() => self.setmodal_edit(params)}
                  class="ivu-icon ivu-icon-ios-create-outline icon_weight"
                  title="修改"
                >
                  修改
                </i>
                <i
                  on-click={() => self.del(params)}
                  class="ivu-icon ivu-icon-ios-trash-outline icon_weight"
                  title="删除"
                >
                  删除
                </i>
              </div>
            );
          }
        }
      ],
      announcement_modal1: false,
      announcement_modal_loading: false,
      modal_edit: false,
      modal_loading_edit: false
    };
  },
 
  mounted() {
    
  },
  methods: {
    //   获取商户信息
    merchant_table(){

    },
    //   添加商户
    add_merchant(){
        
    },
    //分页改变 
    merchant_data(){

    },
    //   搜索
   search(){

   },
    // 删除
    del(params) {
      this.$Modal.confirm({
        title: "确认提醒",
        content: "<p>确认删除这条商户信息？</p>",
        onOk: () => {
        //   this.deleteHrpEmployee(params);
        }
      });
    },
    // 修改
    setmodal_edit(params){

    }
  }
};
</script>